<template>
	<div>
		<domain-nav-search id="domain-nav-search" />
		<section class="dp">
			<client-only />
			<div class="dp_part1 bg-danger-1">
				<img src="~/assets/images/group-photo.jpg" object-fit="cover" class="w-full invisible" alt="" srcset="" />
				<div class="actor gb-inner">
					<div class="actor__prefix" @click="handleOnFocus">Search for your domain name...</div>
					<div v-show="!isClick" id="vader" type="text" class="actor__content" @click="handleOnFocus"></div>
					<a-input
						v-show="isClick"
						id="vader-input"
						ref="searchContentRef"
						v-model="searchContent"
						class="actor__input"
						allow-clear
						@blur="handleOnBlur"
					/>
					<a-button type="primary" class="w-98px" @click="handleSearch">Search</a-button>
				</div>
			</div>

			<div class="dp_common bg-success-4">
				<h1>hi，look a title</h1>
			</div>
			<div class="dp_part2">
				<img src="~/assets/images/group-photo.jpg" object-fit="cover" class="w-full invisible" alt="" srcset="" />
			</div>
			<div class="dp_common bg-amber">
				<ul class="w-full flex-col-1 gap-y-8">
					<li v-for="(item, index) in items" :key="index">{{ item.name }}</li>
				</ul>
				<section v-if="loading" class="flex-col-1 gap-y-8 m-auto px-4">
					<basic-skeleton
						:loading="loading"
						:show-count="20"
						:widths="[['100%'], ['100%', '100%'], ['100%', '100%'], ['100%', '100%'], ['100%', '100%']]"
					/>
					<a-spin dot />
				</section>
				<div v-else ref="observerElement" class="w-9rem h-3rem bg-black text-white rounded-full flex-center" @click="handleMore">
					查看更多
				</div>
			</div>
			<div class="dp_common bg-white">
				<h1>nice right?</h1>
			</div>
		</section>
	</div>
</template>
<script setup lang="ts">
const { t } = useI18n();
const {
	public: { masterDomain }
} = useRuntimeConfig();

useHead({
	titleTemplate: () => t("console.productName") + " - " + t("console.nav.domain")
});
useSeoMeta({ ...useSeoTags({ url: masterDomain }) });
const addScenes = [
	["vader:Start typing...", 800],
	[
		"vader:youridea.com",
		800,
		-8,
		"circle.net",
		800,
		-10,
		"version.org",
		800,
		-11,
		"brandnew.site",
		800,
		-13,
		"world.online",
		800,
		-12,
		"business.ca",
		1000
	]
];
const isClick = ref(false);
const searchContentRef = ref();
const searchContent = ref("");
const handleOnFocus = () => {
	isClick.value = true;
	nextTick(() => {
		searchContentRef.value.focus();
	});
};
const handleOnBlur = () => {
	if (searchContent.value === "") {
		isClick.value = false;
	}
};
const handleSearch = () => {
	console.log("searchContent", searchContent.value);
};
watch(searchContent, val => {
	if (val.length <= 0) {
		isClick.value = false;
		searchContent.value = "";
	} else {
		isClick.value = true;
	}
});
const items = ref([{ name: "Item 0" }, { name: "Item 1" }, { name: "Item 2" }]);
const observerElement = ref();

const observer = ref();
const isStart = ref(false);
const loading = ref(false);
const handleMore = () => (isStart.value = true);
// 模拟异步加载更多元素
const loadMoreItems = async () => {
	if (items.value.length >= 100) return;
	// 发起异步请求获取更多数据
	const newItems = await fetchMoreItems(items.value.length);

	// 更新items数组
	items.value.push(...newItems);
};
watchEffect(() => {
	if (isStart.value) {
		observer.value = new IntersectionObserver((entries, _observer) => {
			entries.forEach(entry => {
				if (entry.isIntersecting) {
					// 当触底时加载更多元素
					loadMoreItems();
				}
			});
		});
		observer.value.observe(observerElement.value);
	}
});
// 模拟异步请求获取更多数据
const fetchMoreItems = (index: number) => {
	// 发起异步请求，获取更多数据
	// 返回一个Promise，包含新的元素数组
	// 这里可以根据实际需求来实现数据获取逻辑
	return new Promise(resolve => {
		loading.value = true;
		setTimeout(() => {
			const newItems = [];
			for (let i = 0; i < 20; i++) {
				newItems.push({ name: `Item ${index + i}` });
			}
			loading.value = false;
			resolve(newItems);
		}, 1500);
	});
};
let scrollFn = null as any;
onMounted(() => {
	useGsapBackgroundAnimation(".dp_part1");
	useTheater("vader", { autoplay: true }, addScenes);
	useGsapBackgroundAnimation(".dp_part2", 0.05);
	useGsapBackgroundAnimation(".dp_part2", 0.05);
	const { selector } = useHeaderRoom(document.querySelector("#domain-nav-search")!, {
		offset: -200,
		tolerance: { up: 0, down: 0 },
		classes: {
			initial: "search-animated", // 当元素初始化后所设置的 class
			pinned: "slideUp", // 向上滚动时设置的 class
			unpinned: "slideDown", // 向下滚动时所设置的 class
			bottom: "headroom--bottom", // 当元素到达底部时所设置的 class
			top: "headroom--top" // 当元素到达顶部时所设置的 class
		}
	});
	scrollFn = function () {
		const domainServiceHeight = document.getElementById("domain-services")?.scrollHeight;
		if (window.scrollY <= 300 || window.scrollY >= domainServiceHeight! * 0.7) {
			selector.style.display = "none";
		} else {
			selector.style.display = "block";
		}
	};
	scrollFn();
	window.addEventListener("scroll", debounce(scrollFn, 20), false);
});
// 组件卸载时清除事件监听器
onUnmounted(() => {
	window.removeEventListener("scroll", debounce(scrollFn, 20), false);
});
const backgroundSizeType = computed(() => {
	if (useAppStore().deviceType === 1) return "contain";
	return "contain";
});
</script>
<style lang="less" scoped>
.search-animated {
	will-change: transform;
	z-index: 99;
	position: fixed;
	top: 64px;
	left: 0;
	right: 0;
	transition: all 0.2s ease-in-out;
}
.search-animated.slideDown {
	top: 0;
}
.search-animated.slideUp {
	top: 64px;
}
.search-animated.headroom--top {
	display: none;
}
.search-animated.headroom--bottom {
	display: none;
}
</style>
<style scoped lang="less">
.dp {
	@apply flex flex-col h-full relative;

	&_common {
		@apply w-full p-4px;
		// height: 100vh;
		min-height: 100vh;
	}

	&_part1 {
		@apply w-full  relative;
		// height: 80vh;
		background: url("~/assets/images/group-photo.jpg") no-repeat;
		// background-size: 100% 80vh;
		background-color: #2f3133;
		background-size: v-bind("backgroundSizeType");
		.actor {
			@apply absolute left-0  flex flex-col gap-y-1;
			top: 40%;
			&__prefix {
				@apply text-[#919091];
			}
			&__input {
				height: 3.75rem;
				@apply border-none bg-transparent   pl-0;
				:deep(.arco-input) {
					color: #fff;
					font-size: 3rem;
					@apply font-700;
					&:focus {
						outline: none;
					}
				}
			}
			&__content {
				font-size: 3rem;
				height: 3.75rem;
				@apply font-700 bg-transparent  text-color-placeholder-1;
			}
			.actor__content--typing::after {
				//添加打字和删除时的光标
				content: "|";
				animation: blink 500ms infinite;
			}
		}
	}
	&_part2 {
		background: url("~/assets/images/group-photo.jpg") no-repeat;
		background-size: v-bind("backgroundSizeType");
		@apply w-full  p-4px bg-black;
		will-change: transform;
	}
}
</style>
